<template>
  <div class="j-amdin">
    <!-- 侧边栏 -->
    <div class="j-aside" :class="{ collapsed: collapse }">
      <j-logo />
      <j-menu />
    </div>

    <!-- 右侧 -->
    <div class="j-main">
      <div class="j-head">
        <!-- 面包屑 -->
        <div class="j-bread">
          <j-bread />
        </div>
        <!-- 动作菜单 -->
        <div class="j-actions">
          <j-theme />
          <j-screen />
          <j-dropdown />
        </div>
      </div>
      <!-- tabs -->
      <j-tabs />
      <!-- 内容 -->
      <div class="j-container">
        <router-view class="j-base-view" v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import jTheme from "@/components/common/theme/index.vue";
import jScreen from "@/components/common/screen/index.vue";
import jMenu from "@/components/admin/menu/index.vue";
import jBread from "@/components/admin/bread/index.vue";
import jDropdown from "@/components/common/dropdown/index.vue";
import jTabs from "@/components/admin/tabs/index.vue";
import jLogo from "@/components/admin/logo/index.vue";
import { collapse } from "@/components/admin/menu/index";

// console.log(import.meta.env);
</script>
<style lang="less">
.j-amdin {
  display: flex;
  background-color: var(--color-bg-1);
  color: var(--color-neutral-10);
  .j-aside {
    width: 240px;
    height: 100vh;
    border-right: @j_border;
    transition: width 0.3s;
    &.collapsed {
      width: 48px !important;
    }
    &.collapsed ~ .j-main {
      width: calc(100% - 48px);
    }

    .j-logo {
      height: 90px;
      border-bottom: @j_border;
    }
  }
  .j-main {
    width: calc(100% - 240px);
    transition: width 0.3s;
    .j-head {
      height: 60px;
      border-bottom: @j_border;

      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px 0 20px;
      .j-actions {
        display: flex;
        align-items: center;
        //actions svg 样式配置
        svg {
          font-size: 18px;
          cursor: pointer;
          margin-right: 6px;
        }
      }
    }

    .j-container {
      height: calc(100vh - 90px);
      overflow-y: hidden;
      overflow-x: hidden;
      background-color: var(--color-fill-1);
      padding: 10px;
      .j-base-view {
        height: 100%;
        background-color: var(--color-bg-1);
        border-radius: 5px;
        // height: 1000px;
      }
    }
  }
}

// 组件刚开始离开
.fade-leave-active {
  transform: translateX(20px);
  opacity: 0;
}
// 组件离开结束
.fade-leave-to {
}
// 组件刚开始进入
.fade-enter-active {
  transform: translateX(-20px);
  opacity: 0;
}
// 组件进入结束
.fade-enter-to {
  transform: translateX(0);
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
  transition: all 0.3s ease-out;
}
</style>
